<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ include file="/WEB-INF/public/head.jsp" %>
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>找回密码</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link href="${system}/static/css/home.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="${system}/static/css/mui.min.css" rel="stylesheet"/>
    <link href="${system}/static/css/mui.css"/>
    <link href="${system}/static/css/feedback.css" rel="stylesheet" type="text/css"/>
</head>
<style>
    body {
        border: 0;
        margin: 0;
        background: #ebebeb;
    }

    html {
        font-family: '微软雅黑';
    }

    img {
        display: block;
    }

    a {
        color: #333;
        text-decoration: none;
    }

    .box {
        width: 94%;
        margin: 0 auto;
    }
</style>
<body style="background:#fff;">


<div style="margin-top:56px;">
    <div class="box">
        <div class="lo_1 lo_2">
            <span>手机号:</span>
            <input type="text" id="phoneNumber" maxlength="11" placeholder="请输入手机号"
                   style="width:200px; height: 25px; margin-top: 11px; border: none;">
        </div>
    </div>
    <div class="box">
        <div class="lo_1 lo_2">
            <span>验证码:</span>
            <input type="text" placeholder="6位验证码" id="code"
                  maxlength="6" style="width:120px; height: 25px; margin-top: 11px; border: none;">
            <input type="button" id="v_code"  id="btn" class="btn_mfyzm" value="获取验证码" style="margin-top:5px;float: right;width: 100px;"/>
        </div>
    </div>
    <div class="box">
        <div class="lo_1 lo_2">
            <span>新密码:</span>
            <input type="password" minlength="6" maxlength="16" id="password" placeholder="请输入6-16位字符"
                   style="width:200px; height: 25px; margin-top: 11px; border: none;">
        </div>
    </div>

    <div class="mui-content-padded">
        <a href="#" class="lo_login" id="register" style="margin-top:30px;color: white;">确定</a>
    </div>

</div>

<script src="${system}/static/js/mui.min.js"></script>
<script src="${system}/static/js/mui.js"></script>
<script type="text/javascript">
</script>
<script>
    var v_phoneNumber = /^1[34578]\d{9}$/; //手机号表达式
    var v_code = /^(\d){6}$/;	//验证码表达式
    var wait = 60;	//停止时间
    var v_pwd = /^[\w_-]{6,16}$/;	//密码正则表达式


    $("#v_code").click(function () {
        if (v_phoneNum()) {
            var phoneNumber = $("#phoneNumber").val();
            ajax("${system}/message/sendModifyPwdMsg", {"phone": phoneNumber}, "text", "post", true, function (data) {
                
                
                switch (data) {
                    case "success":
                        time();
                        mui.toast('验证码发送成功!');
                        //验证码发送成功
                        break;
                    case "frequently":
                        mui.toast('您在一小时中操作过于频繁,请一小时后再试!');
                        //一小时内操作频繁
                        break;
                    case "limit":
                        mui.toast('您在一天中操作过于频繁,请明天再试!');
                        //一天内操作频繁
                        break;
                    case "fail":
                        mui.toast('验证码发送失败!');
                        //验证码发送失败
                        break;
                    case "not_exist":
                        mui.toast('用户不存在!');
                        //用户不存在
                        break;
                    default :
                        mui.toast('发送验证码时出现问题,请稍后再试!');
                        //服务端发生异常,不能发送
                        break;
                }
            }, function (error) {
                console.log(error)
                mui.toast('请检查你的网络设置!');
            });
        }
    });


    $("#register").click(function () {
        var phoneNumber = $("#phoneNumber").val();	//手机号
        if (!v_phoneNumber.test(phoneNumber)) {
            mui.toast('请输入手机号!');
            return;
        }
        var code = $("#code").val();	//验证码
        if (!v_code.test(code)) {
            mui.toast('验证码格式错误!');
            return;
        } else {
            /*alert("验证码错误!");
            return;*/
        }
        var password = $("#password").val();	//密码
        if (!v_pwd.test(password)) {
            mui.toast('密码格式错误!');
            return;
        }
        //程序执行到此处说明以上要求全部符合,接下来该判断验证码是否正确
        ajax("${system}/user/retrieve.do", {
            "user_number": phoneNumber,
            "user_password": hex_md5(password).toUpperCase(),
            "massageCode": code
        }, "text", "post", true, function (data) {
            if (data == "success") {
                //成功
                mui.alert("密码修改成功!","提示","OK",function () {
                    window.location.href="${system}/user/login";
                })
            } else if (data == "fail") {
                //失败
                mui.toast('密码修改失败!');
            } else if (data == "mismatch") {
                //不匹配
                mui.toast('验证码不匹配!');
            } else {
                //异常
                mui.toast('修改密码时出现问题,请稍后再试!');
            }
        }, function (error) {
            console.log(error);
            mui.toast('请检查你的网络设置!');
        });

    });


    //验证码计时器
    function time() {
        if (wait == 0) {
            $("#v_code").attr("disabled", false);
            $("#v_code").val("获取验证码");
            wait = 60;
            return;
        } else {
            wait--;
            $("#v_code").attr("disabled", true);
            $("#v_code").val("重新发送(" + wait + ")");
            setTimeout(function () {
                time();
            }, 1000);
        }
    }


    //验证手机号
    function v_phoneNum() {
        var phoneNumber = $("#phoneNumber").val();	//手机号
        if (!v_phoneNumber.test(phoneNumber)) {
            mui.toast('手机号格式错误!');
            return false;
        }
        return true;
    }
</script>
</body>

</html>